<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>当前的n值{{n}}</p>
    <button @click="n++">+1</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {n: 1},
        beforeCreate() {
            console.log(" beforeCreate")
        },
        created() {
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
        },
        mounted(){
            console.log("mounted")
        },
        /*
        * beforeUpdate
            类型：Function
            详细：
            在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
        * */
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        /*
        * updated
            类型：Function
            详细：
            在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
            当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，
            * 你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
            注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
        * */
        updated(){
            console.log("updated")

        }
    })
</script>
</body>
</html>
